Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
reeft_gps_test
/
REEFTintegrationLog
/
saved
:
chart_line.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line Chart Example</title> <!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>--> <script src="javascript/jquery-2.2.4.min.js"></script> <script src="javascript/moment-with-locales.min.js"></script> <script src="javascript/moment-duration-format.min.js"></script> <script type="text/javascript" src="javascript/chart.js_master/chart.min.js"></script> <!--<script type="text/javascript" src="javascript/chart.js_master/chart.min_v2.9.4.js"></script>--> <script type="text/javascript" src="javascript/chart.js_master/utils.js"></script> <script type="text/javascript" src="javascript/jspdf.min.js"></script> <script type="text/javascript" src="javascript/chart.js_master/chartjs-plugin-datalabels.min.js"></script> <script type="text/javascript" src="javascript/chart.js_master/chartjs-adapter-moment.js"></script> <!--<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>--> </head> <body> <div id="canvas-wrapper" style="width:100%" class=""> <canvas id="show-chart-here"></canvas> </div> <script> // Sample data from the JSON provided const jsonData = { "header": { "pHUB_WEBNAM": "HUB_IMPLOG", "pFrom_TIMESTAMP": "0001-01-01-00.00.00.000000", "pTo_TIMESTAMP": "9999-12-31-24.00.00.000000" }, "data": [ { "counter": 4, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.23.06.964312", "HUB_ENDCAL": "2024-11-01-15.23.06.993395", "HUB_SECOND": 0.029083, "HUB_MSECND": 29083, "HUB_INPTXT": "pWhatToCall=*WAITING_FOR_IMPORT / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.23.06.998049" }, { "counter": 5, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.22.39.656749", "HUB_ENDCAL": "2024-11-01-15.22.39.974184", "HUB_SECOND": 0.317435, "HUB_MSECND": 317435, "HUB_INPTXT": "pWhatToCall=*SUPERSEARCH / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.22.39.976919" }, { "counter": 6, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.22.15.904066", "HUB_ENDCAL": "2024-11-01-15.22.15.969961", "HUB_SECOND": 0.065895, "HUB_MSECND": 65895, "HUB_INPTXT": "pWhatToCall=*WAITING_FOR_IMPORT / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.22.15.972846" }, { "counter": 7, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.22.10.238684", "HUB_ENDCAL": "2024-11-01-15.22.10.303180", "HUB_SECOND": 0.064496, "HUB_MSECND": 64496, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.22.10.306007" }, { "counter": 8, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.22.03.780675", "HUB_ENDCAL": "2024-11-01-15.22.03.821209", "HUB_SECOND": 0.040534, "HUB_MSECND": 40534, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.22.03.824666" }, { "counter": 9, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.22.02.614261", "HUB_ENDCAL": "2024-11-01-15.22.02.633407", "HUB_SECOND": 0.019146, "HUB_MSECND": 19146, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.22.02.637409" }, { "counter": 10, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.21.55.076754", "HUB_ENDCAL": "2024-11-01-15.21.55.130926", "HUB_SECOND": 0.054172, "HUB_MSECND": 54172, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.21.55.133799" }, { "counter": 11, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.21.52.096592", "HUB_ENDCAL": "2024-11-01-15.21.52.206689", "HUB_SECOND": 0.110097, "HUB_MSECND": 110097, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.21.52.209611" }, { "counter": 12, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.21.45.663630", "HUB_ENDCAL": "2024-11-01-15.21.45.733114", "HUB_SECOND": 0.069484, "HUB_MSECND": 69484, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.21.45.736117" }, { "counter": 13, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.21.03.534688", "HUB_ENDCAL": "2024-11-01-15.21.03.548141", "HUB_SECOND": 0.013453, "HUB_MSECND": 13453, "HUB_INPTXT": "pWhatToCall=*DIRNAME / pDirName=2024-10-30 / pNumberOfFiles=2 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.21.03.553620" }, { "counter": 14, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.20.47.171913", "HUB_ENDCAL": "2024-11-01-15.20.47.240510", "HUB_SECOND": 0.068597, "HUB_MSECND": 68597, "HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.20.47.243604" }, { "counter": 15, "HUB_WEBNAM": "HUB_IMPLOG", "HUB_PACKNO": 0, "HUB_PRODID": "", "HUB_STRCAL": "2024-11-01-15.20.35.267610", "HUB_ENDCAL": "2024-11-01-15.20.35.294615", "HUB_SECOND": 0.027005, "HUB_MSECND": 27005, "HUB_INPTXT": "pWhatToCall=*DIRNAME / pDirName=2024-10-30 / pNumberOfFiles=2 / pIFS_File_Path=", "HUB_RPYCOD": "00", "HUB_RPYTXT": "", "HUB_IFSFIL": "", "HUB_TIMSTP": "2024-11-01-15.20.35.298019" } ] }; // Parsing the data for the chart const labels = jsonData.data.map(entry => entry.HUB_TIMSTP); const dataPoints = jsonData.data.map(entry => entry.HUB_SECOND); // Chart.js configuration const ctx = document.getElementById('show-chart-here').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'HUB_SECOND', data: dataPoints, borderColor: 'blue', borderWidth: 2, fill: false }] }, options: { responsive: true, plugins: { title: { display: true, text: `${jsonData.header.pHUB_WEBNAM}, ${jsonData.header.pFrom_TIMESTAMP}, ${jsonData.header.pTo_TIMESTAMP}`, font: { size: 16 } }, tooltip: { callbacks: { label: function(context) { const entry = jsonData.data[context.dataIndex]; return [ `HUB_WEBNAM: ${entry.HUB_WEBNAM}`, `HUB_STRCAL: ${entry.HUB_STRCAL}`, `HUB_ENDCAL: ${entry.HUB_ENDCAL}`, `HUB_SECOND: ${entry.HUB_SECOND}`, `HUB_MSECND: ${entry.HUB_MSECND}`, `HUB_TIMSTP: ${entry.HUB_TIMSTP}` ]; } }, backgroundColor: 'black', titleColor: 'white', bodyColor: 'white', borderColor: 'white', borderWidth: 1, displayColors: false } }, scales: { x: { type: 'time', time: { parser: 'YYYY-MM-DD-HH.mm.ss.SSSSSS', // Adjusted parser for full timestamp format tooltipFormat: 'YYYY-MM-DD HH.mm.ss', // Tooltip format displayFormats: { millisecond: 'YYYY-MM-DD HH:mm:ss.SSS', // Display format for x-axis labels second: 'YYYY-MM-DD HH:mm:ss', minute: 'YYYY-MM-DD HH:mm', hour: 'YYYY-MM-DD HH' } }, title: { display: true, text: 'HUB_TIMSTP' } }, y: { title: { display: true, text: 'HUB_SECOND' } } } } }); </script> </body> </html>